import React, { Component } from 'react';
import ContentBase from './base';
import DigitButton from '../buttons/digitButton';
import { connect } from 'react-redux';
import OperationButtonn from './../buttons/operationButton';

class Calculator extends Component {
    state = { 
        formater: Intl.NumberFormat('en-us')
     } 

    format(number) {
        if (number === "") return number;
        const [integer, decimal] = number.split('.');
        if (decimal === undefined) return this.state.formater.format(integer);
        return `${this.state.formater.format(integer)}.${decimal}`;
    }
    render() { 
        return (<React.Fragment>
            <ContentBase>
                <div className="calculator">
                    <div className="output">
                        <div className="last-output">{this.format(this.props.last_operand)}{this.props.operation}</div>
                        <div className="cur-output">{this.format(this.props.cur_operand)}</div>
                    </div>
                    <OperationButtonn operation="C" />
                    <OperationButtonn operation="Del" />
                    <OperationButtonn operation="x²"/>
                    <OperationButtonn operation="÷"/>
                    <DigitButton value='7' />
                    <DigitButton value='8' />
                    <DigitButton value='9' />
                    <OperationButtonn operation="×"/>
                    <DigitButton value='4' />
                    <DigitButton value='5' />
                    <DigitButton value='6' />
                    <OperationButtonn operation="-"/>
                    <DigitButton value='1' />
                    <DigitButton value='2' />
                    <DigitButton value='3' />
                    <OperationButtonn operation="+"/>
                    <OperationButtonn operation="+/-"/>
                    <DigitButton value='0' />
                    <DigitButton value='.' />
                    <OperationButtonn operation="="/>
                </div>
            </ContentBase>
        </React.Fragment>);
    }
}

const mapStateToProps = (state, props) => {
    return {
        last_operand: state.last_operand,
        cur_operand: state.cur_operand,
        operation: state.operation,
    }
}

 
export default connect(mapStateToProps)(Calculator);